<template>
  <div class="user-info">
    <div class="title">基本信息</div>
    <ul>
      <li>
        <span>头像</span>
        <span class="avatar">
          <img src="http://pinduoduoimg.yangkeduo.com/avatar/default/3.png@162w_1l_70Q_50sh.webp" alt="">
        </span>
      </li>
      <li>
        <span>昵称</span>
        <span class="name">
          <input type="text" v-model="userData.name">
        </span>
      </li>
      <li @click.prevent="actionSheetHandler">
        <span>性别</span>
        <span class="gender" >{{userData.gender}}</span>
      </li>
      <li>
        <span>常住地</span> 
        <span class="address">{{userInfo.address}}</span>
      </li>
      <li @click.prevent="openPicker">
        <span>生日</span>
        <span>{{userData.user_birthday}}</span>
      </li>
      <li>
        <span>个性签名</span>
        <span>{{userInfo.sign}}</span>
      </li>
    </ul>
    <div class="submit" @click.prevent="submit()">
      保存修改
    </div>
    <div class="back" @click="back">返回</div>
    <!--    性别选择器-->
    <mt-actionsheet
      :actions="actions"
      v-model="sheetVisible">
    </mt-actionsheet>
    <!--    日期选择器-->
    <mt-datetime-picker
      ref="picker"
      v-model="pickerVisible"
      type="date"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      @confirm="handlerConfirm"
      :startDate=startDate
    >
    </mt-datetime-picker>
  </div>
</template>

<script>
  import moment from 'moment'
  import { Toast } from 'mint-ui'
  import { mapState } from 'vuex'
  import { DatetimePicker } from 'mint-ui'
  import { mapMutations } from 'vuex'

  export default {
    name: 'UserInfo',
    mounted () {
      this.userData = this.userInfo
    },
    data () {
      return {
        sheetVisible: false,
        pickerVisible: false,
        startDate: new Date('1960-01-01'),
        userData: {},
        actions: [
          {
            name: '男',
            method: this.genderHandler
          },
          {
            name: '女',
            method: this.genderHandler
          },
          {
            name: '其他',
            method: this.genderHandler
          }
        ]
      }
    },
    methods: {
      genderHandler (value) {
        this.userData.gender = value.name
        console.log(value.name)
      },
      actionSheetHandler () {
        this.sheetVisible = !this.sheetVisible
      },
      openPicker () {
        console.log(1)
        this.$refs.picker.open()
      },
      handlerConfirm (value) {
        let date = moment(value).format('YYYY年MM月DD日')
        this.userData.user_birthday = date
      },
      submit () {
        this.udpateUserInfo(this.userData)
        this.$router.replace('/personal')
      },
      back () {
        this.$router.back()
      },
      ...mapMutations(['udpateUserInfo'])
    },
    computed: {
      ...mapState(['userInfo'])
    },
    components: {
      DatetimePicker
    }
  }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  .user-info
    position fixed
    left 0
    top 0 
    right 0
    bottom 0
    background #f5f5f5

    .title
      width 100%
      height 50px
      padding-left 10px
      font-size 20px
      line-height 50px

    .submit
      margin-top 20px
      width 100%
      height 50px
      text-align center
      line-height 50px
      font-size 20px
      background: #fff
      color: #e02e24
    .back
      margin-top 5px
      width 100%
      height 50px
      text-align center
      line-height 50px
      font-size 20px
      background: #fff
      color: #ccc

    ul
      width: 100%

      li
        width: 100%
        height: 50px
        display flex
        justify-content space-between
        align-items center
        padding 0 10px
        box-sizing border-box
        background #fff
        border-bottom 1px solid #f5f5f5
        color #333

        span
          &:nth-child(2)
            color #ccc

            input
              width 100px
              height 100%
              border none
              outline none
              text-align right
              color: #ccc
              font-size 18px

        &:nth-child(1)
          height 80px

          .avatar
            display inline-block
            width 50px
            height 50px
            border-radius 50%
            overflow hidden

            img
              width 100%

</style>
